DOM Element properties
Property ต่างๆ ของ DOM ที่สามารถอ่านหรือกำหนดได้ด้วย Javascript
| Properties | คำอธิบาย |
|---|---|
| attributes[] |
อ่านค่า attributes ทั้งหมดของ element ที่เป็นไปได้ลง array
ตัวอย่าง
//list รายการ attributes ของ tag title var objattributes = document.getElementById( "title" ).attributes for ( var i = 0 ; i < objattributes.length ; i++ ) { document.write( objattributes[i].name + '=' + objattributes[i].value + '<br />' ); } alert( objattributes.getNamedItem( "id" ).value ) //คืนค่า property id ของ tag title |
| childNodes[] | อ่านค่ารายการ elements ที่อยู่ภายใน element ที่กำหนด ตัวอย่าง <ul id='ul'> <li>1</li> <li>2</li> </ul> <script type="text/javascript"> var obj = document.getElementById( "ul" ) for ( var i = 0 ; i < obj.childNodes.length ; i++ ) { document.write( obj.childNodes[i].nodeName + '<br />' ); } </script> |
| className | อ่านหรือกำหนดค่า CSS class ตัวอย่าง document.getElementById( "ul" ).className = 'xyz'; alert( document.getElementById( "ul" ).className ); |
clientWidth clientHeight | อ่านค่าความกว้างและความสูงของพื้นที่แสดงผล ไม่รวม borders, margins, และ scrollbars (NS7+, IE4+) ตัวอย่าง var pagewidth = document.body.clientWidth var pageheight = document.body.clientHeight |
| dir | อ่านหรือกำหนดค่าทิศทางการเขียนตัวอักษร จากซ้ายไปขวา "rtl" หรือ ขวาไปซ้าย "ltr" (default) ตัวอย่าง document.getElementById("mydiv").dir = "rtl"; |
| firstChild | คืนค่า element แรกที่พบภายใน element ที่กำหนด |
| id | อ่านหรือกำหนด ID ของแต่ละ element เพื่อใช้อ้างถึงโดย Javascript และ CSS ค่านี้จะต้องไม่ซ้ำกันในแต่ละหน้า |
| innerHTML | อ่านหรือกำหนดค่าข้อความ HTML ภายใน element ตัวอย่าง <p><b>ข้อความเดิม</b></p> <script type="text/javascript"> window.onload = function() { document.getElementsByTagName("p")[0].innerHTML = "<b>ข้อความใหม่</b>" } </script> |
| lang | Read/write property that specifies the language of an element's attribute values and text content. Commonly invoked on the body level to determine the base language of the document. |
| lastChild | คืนค่า element สุดท้าย |
| localName | คืนค่าชื่อของ node ของ XML element คล้ายกับ property nodeName ของ HTML |
| namespaceURI | Returns the URI string assigned to the xmlns attribute of an XML element. |
| nextSibling | คืนค่า node ถัดไปของ node ปัจจุบัน คืนค่า null ถ้าไม่พบ node ถัดไป |
| nodeName | คืนค่าชื่อของ node หรือคือชื่อ ของ tag ตัวพิมพ์ใหญ่ ตัวอย่าง if (document.getElementById("test").firstChild.nodeName=="DIV") { alert("This is a DIV") } |
| nodeType | คืนค่าชนิดของ node ดู See chart สำหรับค่าของ node ตัวอย่าง alert(document.getElementById("adiv").nodeType) //DIV element. Alerts 1 |
| nodeValue | อ่านและกำหนดค่าข้อความของ node ชนิด text หรือคืนค่า Null สำหรับ node ชนิดอื่นๆ ตัวอย่าง <div id="test">ข้อความเดิม</div> <script type="text/javascript"> if (document.getElementById("test").firstChild.nodeName=="#text") document.getElementById("test").firstChild.nodeValue="ข้อความใหม่" </script> |
| offsetLeft | Gets the horizontal offset position of the current element relative to its offset container. Read only. Use "offsetParent" to determine what an element's container is. Typically a positioned DIV or TABLE will act as an offset container to any element contained inside them.อ่านตำแหน่งด้านซ้ายของ element เทียบกับ container |
| offsetTop | Gets the vertical offset position of the current element relative to its offset container. Read only. Use "offsetParent" to determine what an element's container is. |
| offsetParent | Returns the offset container of the current element. For most elements on the page, the "BODY" is their offset container. However, a positioned DIV for example creates its own offset container space. ตัวอย่าง <div id="master" style="position: relative"> <div id="slave" style="position: relative">test</div> </div> <script type="text/javascript"> alert(document.getElementById("slave").offsetParent.id) //alerts "master" </script> |
| offsetWidth (offsetHeight) | คืนค่าความกว้าง(สูง)ของ element รวม borders และ padding แต่ไม่รวม margins ใน IE6 หากไม่กำหนด doctype ค่านี้จะไม่รวม margins และ padding (cross browser non W3C DOM) |
| ownerDocument | คืนค่า document object เจ้าของ node |
| parentNode | คืนค่า object node ที่เป็น parent ของ node นี้ในโครงสร้างต้นไม้ |
| prefix | Returns the namespace prefix of the current XML node, or null if not available. |
| previousSibling | Returns the previous node relative the current one in the document tree. Returns null if there are none or for text nodes inside an element. |
| scrollLeft | คืนค่าระยะห่างระหว่างขอบซ้ายสุดของ element กับ ขอบซ้ายสุดของ element ด้านนอก หากมีการเลื่อน srollbar ระยะนี้จะรวมระยะทางที่ซ่อนอยู่จากการเลื่อนของ scrollbar ด้วย cross browser (NS7+, IE4+) |
| scrollTop | คืนค่าระยะห่างระหว่างขอบบนสุดของ element กับขอบบนสุดของ element ด้านนอก หากมีการเลื่อน srollbar ระยะนี้จะรวมระยะทางที่ซ่อนอยู่จากการเลื่อนของ scrollbar ด้วย cross browser (NS7+, IE4+) ตัวอย่าง <div id="static" style="width:150px; height:150px; position: absolute; border:1px solid yellow; left: 5px;">Some text</div> <script type="text/javascript"> //กำหนดตำแหน่งของ"static" ให้คงที่บนเพจ setInterval("document.getElementById('static').style.top=document.body.scrollTop+10+'px'", 50) </script> |
| scrollWidth (scrollHeight) | คืนค่าความกว้าง(สูง)ของ element รวมพื้นที่อื่นๆของ element ทั้งหมด และ scrollbar ถ้า element ไม่แสดง scrollbar scrollWidth จะมีค่าเท่ากับ clientWidth (scrollHeight ก็เช่นเดียวกัน) cross browser (NS7+, IE4+) |
| style | style เป็น object หนึ่ง สำหรับอ่านหรือกำหนดค่า การแสดงผลของแต่ละ element ตัวอย่าง document.getElementById("test").style.backgroundColor="yellow" |
| tabIndex | อ่านค่าหรือกำหนด tab order ของ element |
| tagName | คืนค่าชื่อ tag ของ element |
| title | อ่านค่าหรือกำหนด propert title ของ element เพื่อที่จะแสดงบน hint |